<template>
  <div class="about">
    <van-list
      class="about"
      style="overflow: auto"
      v-model="loading"
      :finished="finished"
      finished-text="我也是有底线的"
      @load="onLoad"
    >
      <div class="film" v-for="(item, index) in newslist" @click="handle(item)">
        <div class="leftnew">
          <p>{{ item.title }}</p>
          <div>发布时间：{{ item.passtime }}</div>
        </div>
        <div class="newimg"><img :src="item.image" /></div>
      </div>
    </van-list>
  </div>
</template>
<style scoped>
.leftnew div {
  color: gray;
  font-size: 14px;
  margin-top: 34px;
}
.leftnew p {
  margin: 0px !important;
  font-weight: bold;
}
.leftnew {
  width: calc(100% - 100px);
  float: left;

  height: auto;
}
</style>
<script>
import Vue from "vue";
import { List } from "vant";
Vue.use(List);
export default {
  data() {
    return {
      loading: false,
      finished: false,
      newslist: [],
      page: 1,
      pageCount: 0,
    };
  },
  mounted() {},
  methods: {
    handle(item){
      window.open(item.path,"_blank")
    },
    news() {},
    onLoad() {
      this.loading = true;
      if (this.page > 1 && this.page > this.pageCount) {
        this.finished = true;
        this.page=this.pageCount;
        return;
      }
      
      console.log(this.page);
      this.$http
        .get(`https://api.jiasiyuan.cn/news?page=${this.page}`)
        .then((res) => {
          console.log(res);
          this.pageCount = res.pageCount;
          this.page++
          if (res.result) {
            res.result.forEach((el) => {
              this.newslist.push(el);
            });
          } else {
            this.loading = false;
          }
          this.loading = false;
          console.log(this.newslist);
          // this.onLoad()
        });

      // this.loading = true;
      // this.page++;
      // this.news();
    },
  },
};
</script>
<style scoped>
.newimg {
  width: 100px;
  height: 100px;
  float: right;
}
.about {
  width: 100%;
  height: 100%;
}
.filmshuoming {
  width: 67%;
  height: 100%;
  float: left;
  margin-left: 10px;
}
.filmimg img {
  width: 100%;
  height: 100%;
}
.filmimg {
  width: 90px;
  height: 90px;
  float: left;
}
.film {
  width: 100%;
  height: auto;
  padding: 10px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
}
</style>